<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧社区管理系统 - 费用管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --text-color: #333;
            --border-color: #ddd;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Noto Sans SC', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 0;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 100;
        }
        
        .header h1 {
            font-weight: 500;
            margin: 0;
            font-size: 1.8rem;
        }
        
        /* 导航栏样式 */
        .nav {
            background-color: white;
            padding: 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 99;
        }
        
        .nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        
        .nav ul li {
            position: relative;
        }
        
        .nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            padding: 15px 25px;
            display: block;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .nav ul li a:hover,
        .nav ul li a.active {
            color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .nav ul li a.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        /* 主内容区样式 */
        .main-content {
            display: flex;
            margin-top: 20px;
            gap: 20px;
        }
        
        .sidebar {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            height: fit-content;
            position: sticky;
            top: 80px;
        }
        
        .sidebar h3 {
            color: var(--dark-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .sidebar-menu {
            list-style: none;
            margin-bottom: 25px;
        }
        
        .sidebar-menu li {
            margin-bottom: 8px;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 6px;
            transition: var(--transition);
        }
        
        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }
        
        .sidebar-menu i {
            width: 24px;
            text-align: center;
            font-size: 1.1rem;
        }
        
        .content {
            flex: 1;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 25px;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .card-header h2 {
            color: var(--dark-color);
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 1rem;
            transition: var(--transition);
            font-family: inherit;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 1em;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            font-family: inherit;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }
        
        .btn-outline:hover {
            background-color: var(--light-color);
            transform: translateY(-2px);
        }
        
        .btn-sm {
            padding: 8px 16px;
            font-size: 0.9rem;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        /* 表单布局 */
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-col {
            flex: 1;
        }
        
        /* 必填标记 */
        .required {
            color: var(--danger-color);
            margin-left: 4px;
        }
        
        /* 筛选器 */
        .filter-bar {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .filter-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .filter-actions {
            display: flex;
            gap: 10px;
        }
        
        .filter-group {
            margin-bottom: 15px;
        }

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range span {
    color: #777;
    min-width: 20px;
    text-align: center;
    font-size: 0.9em;
}

.date-range input {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.9em;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* 响应式设计 - 移动设备优化 */
@media (max-width: 768px) {
    .date-range {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    
    .date-range span {
        margin: 0;
        padding: 5px 0;
        text-align: center;
    }
    
    .date-range input {
        width: 100%;
        padding: 12px 15px;
    }
    
    /* 修复日期输入框在移动设备上的显示问题 */
    .date-range input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        background-color: white;
        padding: 12px 15px;
    }
    
    /* 修复日期输入框在Safari上的显示问题 */
    .date-range input[type="date"]::-webkit-inner-spin-button,
    .date-range input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }
}

/* 修复日期输入框在Firefox上的显示问题 */
@-moz-document url-prefix() {
    .date-range input[type="date"] {
        padding: 11px 15px;
    }
}
        
        /* 费用表单 */
        .fee-form {
            background: linear-gradient(to bottom, #f9fbfd, #ffffff);
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .table th, .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        
        .table tr:hover {
            background-color: #f5f7fa;
        }
        
        /* 徽章样式 */
        .badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .badge-success {
            background-color: rgba(46, 204, 113, 0.15);
            color: var(--success-color);
        }
        
        .badge-warning {
            background-color: rgba(243, 156, 18, 0.15);
            color: var(--warning-color);
        }
        
        .badge-danger {
            background-color: rgba(231, 76, 60, 0.15);
            color: var(--danger-color);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                position: relative;
                top: 0;
            }
            
            .form-row {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        @media (max-width: 768px) {
            .date-range {
                flex-direction: column;
                align-items: stretch;
                gap: 5px;
            }
            
            .date-range span {
                margin: 5px 0;
                padding: 5px;
            }
            
            .nav ul {
                flex-wrap: wrap;
            }
            
            .nav ul li a {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
            
            .btn {
                padding: 10px 16px;
            }
            
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .card-header > div {
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 通知 */
        .notification {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            background-color: rgba(46, 204, 113, 0.1);
            border-left: 4px solid var(--success-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: fadeIn 0.4s ease;
        }
        
        .notification.warning {
            background-color: rgba(243, 156, 18, 0.1);
            border-left-color: var(--warning-color);
        }
        
        .notification.danger {
            background-color: rgba(231, 76, 60, 0.1);
            border-left-color: var(--danger-color);
        }
        
        .notification.hidden {
            display: none;
        }
        
        /* 图标样式 */
        .icon-box {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        
        /* 加载效果 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 表单标签 */
        .form-label {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .form-label .required {
            margin-left: 5px;
            font-size: 0.9rem;
        }
        
        /* 选项卡内容 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            display: flex;
            align-items: center;
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.5rem;
            color: white;
        }
        
        .stat-icon.primary {
            background-color: var(--primary-color);
        }
        
        .stat-icon.success {
            background-color: var(--success-color);
        }
        
        .stat-icon.warning {
            background-color: var(--warning-color);
        }
        
        .stat-icon.danger {
            background-color: var(--danger-color);
        }
        
        .stat-info h3 {
            font-size: 1.8rem;
            margin: 0;
            color: var(--dark-color);
        }
        
        .stat-info p {
            margin: 5px 0 0;
            color: #777;
        }
        
        /* 图表容器 */
        .chart-container {
            height: 300px;
            margin: 20px 0;
            background: #f9f9f9;
            border-radius: 8px;
            position: relative;
        }
        
        .chart-wrapper {
            height: 100%;
            padding: 15px;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-top: 20px;
        }
        
        .pagination .btn {
            min-width: 40px;
            padding: 8px 12px;
        }
        
        .pagination .btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 高级筛选面板 */
        .advanced-filter {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-top: 20px;
            display: none;
        }
        
        .advanced-filter.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        /* 批量操作 */
        .batch-actions {
            background-color: #e3f2fd;
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .batch-actions.hidden {
            display: none;
        }
        
        /* 自定义费用项 */
        .custom-fee-field {
            display: none;
            margin-top: 15px;
        }
        
        /* 图表切换 */
        .chart-switcher {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .chart-switcher button {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f8f9fa;
            cursor: pointer;
        }
        
        .chart-switcher button.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 数据导出 */
        .export-options {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            animation: fadeIn 0.3s ease;
        }
        
        .modal-header {
            padding: 20px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h3 {
            margin: 0;
            font-weight: 500;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .close-modal {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .detail-item {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        
        .detail-label {
            width: 120px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .detail-value {
            flex: 1;
        }
        
        .print-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: 0 auto;
        }
        
        .print-header {
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 2px solid #eee;
            padding-bottom: 15px;
        }
        
        .print-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .print-footer {
            margin-top: 30px;
            padding-top: 15px;
            border-top: 1px dashed #ccc;
            text-align: center;
            color: #777;
        }
        
        /* 催缴消息样式 */
        .reminder-content {
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 8px;
            border: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .reminder-actions {
            display: flex;
            gap: 10px;
        }
        
        .mt-10 {
            margin-top: 10px;
        }
        
        .ml-10 {
            margin-left: 10px;
        }
        
        .problem-fixed {
            background-color: #e8f4f8;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        /* 新添加的费用行高亮样式 */
        .new-fee-row {
            animation: highlightRow 2s ease;
            background-color: rgba(46, 204, 113, 0.1);
        }
        
        @keyframes highlightRow {
            0% { background-color: rgba(46, 204, 113, 0.4); }
            100% { background-color: rgba(46, 204, 113, 0.1); }
        }
        
        /* 空状态提示 */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #777;
        }
        
        .empty-state i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-building"></i> 智慧社区管理系统</h1>
    </div>
    
    <div class="nav">
        <ul>
            <li><a href="shoye.html"><i class="fas fa-home"></i> 首页</a></li>
            <li><a href="resident.html"><i class="fas fa-users"></i> 住户管理</a></li>
            <li><a href="property.html"><i class="fas fa-home"></i> 房产管理</a></li>
            <li><a href="repair.html"><i class="fas fa-tools"></i> 报修维护</a></li>
            <li><a href="fee.html" class="active"><i class="fas fa-money-bill-wave"></i> 费用管理</a></li>
            <li><a href="security.html"><i class="fas fa-shield-alt"></i> 社区安防</a></li>
            <li><a href="index.html"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
        </ul>
    </div>
    
    <div class="container">
        <div class="notification hidden" id="actionNotification">
            <div><i class="fas fa-info-circle"></i> <span id="notificationText">操作成功</span></div>
            <button class="btn btn-sm btn-outline" onclick="closeNotification()">关闭</button>
        </div>
        
        <div class="main-content">
            <div class="sidebar">
                <h3><i class="fas fa-money-bill-wave"></i> 费用管理</h3>
                <ul class="sidebar-menu">
                    <li><a href="#" class="active" data-tab="fee-list"><i class="fas fa-list"></i> 费用列表</a></li>
                    <li><a href="#" data-tab="fee-add"><i class="fas fa-plus"></i> 添加费用</a></li>
                    <li><a href="#" data-tab="fee-statistics"><i class="fas fa-chart-bar"></i> 统计分析</a></li>
                </ul>
                
                <h3><i class="fas fa-filter"></i> 筛选器</h3>
                <div class="filter-bar">
                    <div class="filter-group">
                        <label>费用类型</label>
                        <select class="form-control" id="filterType">
                            <option value="all">所有类型</option>
                            <option value="property">物业管理费</option>
                            <option value="parking">停车费</option>
                            <option value="utility">水电费</option>
                            <option value="gas">燃气费</option>
                            <option value="repair">维修基金</option>
                            <option value="other">其他费用</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>缴费状态</label>
                        <select class="form-control" id="filterStatus">
                            <option value="all">所有状态</option>
                            <option value="unpaid">未缴费</option>
                            <option value="paid">已缴费</option>
                            <option value="overdue">已逾期</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>日期范围</label>
                        <div class="date-range">
                           <input type="date" class="form-control" id="startDate" value="2025-05-01">
                           <span>至</span>
                           <input type="date" class="form-control" id="endDate" value="2025-06-20">
                       </div>
                    </div>
                    <button class="btn btn-primary btn-block" onclick="applyFilters()">
                        <i class="fas fa-check"></i> 应用筛选
                    </button>
                    <button class="btn btn-outline btn-block mt-10" onclick="resetFilters()">
                        <i class="fas fa-undo"></i> 重置筛选
                    </button>
                    <button class="btn btn-outline btn-block mt-10" onclick="toggleAdvancedFilter()">
                        <i class="fas fa-sliders-h"></i> 高级筛选
                    </button>
                </div>
            </div>
            
            <div class="content">
                <!-- 费用列表 -->
                <div id="fee-list" class="tab-content active">
                    <div class="batch-actions hidden" id="batchActions">
                        <div>
                            <input type="checkbox" id="selectAll" onchange="toggleSelectAll(this)">
                            <label for="selectAll">全选</label>
                        </div>
                        <div>已选择 <span id="selectedCount">0</span> 项</div>
                        <button class="btn btn-sm btn-outline" onclick="batchExport()">
                            <i class="fas fa-download"></i> 导出
                        </button>
                        <button class="btn btn-sm btn-primary" onclick="batchRemind()">
                            <i class="fas fa-bell"></i> 催缴
                        </button>
                        <button class="btn btn-sm btn-success" onclick="batchMarkAsPaid()">
                            <i class="fas fa-check"></i> 标记为已缴费
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="cancelBatch()">
                            <i class="fas fa-times"></i> 取消
                        </button>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h2><i class="fas fa-list"></i> 费用列表</h2>
                            <div>
                                <button class="btn btn-outline" onclick="toggleAdvancedFilter()">
                                    <i class="fas fa-filter"></i> 高级筛选
                                </button>
                                <button class="btn btn-primary" onclick="exportData('all')">
                                    <i class="fas fa-download"></i> 导出
                                </button>
                            </div>
                        </div>
                        
                        <div class="stats-container">
                            <div class="stat-card">
                                <div class="stat-icon primary">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥156,230</h3>
                                    <p>本月总收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon success">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>92%</h3>
                                    <p>缴费率</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>8</h3>
                                    <p>逾期未缴</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="advanced-filter" id="advancedFilter">
                            <h3><i class="fas fa-filter"></i> 高级筛选</h3>
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <label>楼栋</label>
                                        <select class="form-control" id="filterBuilding">
                                            <option value="">所有楼栋</option>
                                            <option value="A">1栋</option>
                                            <option value="B">2栋</option>
                                            <option value="C">3栋</option>
                                            <option value="D">4栋</option>
                                            <option value="E">5栋</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <label>单元</label>
                                        <select class="form-control" id="filterUnit">
                                            <option value="">所有单元</option>
                                            <option value="1">1单元</option>
                                            <option value="2">2单元</option>
                                            <option value="3">3单元</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <label>金额范围</label>
                                        <div class="date-range">
                                            <input type="number" class="form-control" placeholder="最小金额" id="minAmount">
                                            <span>至</span>
                                            <input type="number" class="form-control" placeholder="最大金额" id="maxAmount">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-outline" onclick="resetAdvancedFilters()">
                                    <i class="fas fa-times"></i> 重置
                                </button>
                                <button class="btn btn-primary" onclick="applyAdvancedFilters()">
                                    <i class="fas fa-check"></i> 应用
                                </button>
                            </div>
                        </div>
                        
                        <div style="overflow-x: auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selectAllRows" onchange="toggleAllRows(this)"></th>
                                        <th>费用编号</th>
                                        <th>住户信息</th>
                                        <th>费用类型</th>
                                        <th>金额</th>
                                        <th>生成日期</th>
                                        <th>缴费状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="feeTableBody">
                                    <tr>
                                        <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                                        <td>FE2025062001</td>
                                        <td>张三 (1栋502)</td>
                                        <td>物业管理费</td>
                                        <td>¥1,250.00</td>
                                        <td>2025-06-01</td>
                                        <td><span class="badge badge-success">已缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showViewModal('FE2025062001')">
                                                <i class="fas fa-eye"></i> 查看
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                                        <td>FE2025062002</td>
                                        <td>李四 (2栋1203)</td>
                                        <td>物业管理费</td>
                                        <td>¥350.00</td>
                                        <td>2025-06-05</td>
                                        <td><span class="badge badge-warning">未缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showEditModal('FE2025062002')">
                                                <i class="fas fa-edit"></i> 编辑
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                                        <td>FE2025062003</td>
                                        <td>王五 (4栋806)</td>
                                        <td>水电费</td>
                                        <td>¥285.50</td>
                                        <td>2025-06-10</td>
                                        <td><span class="badge badge-success">已缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showPrintModal('FE2025062003')">
                                                <i class="fas fa-print"></i> 打印
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                                        <td>FE2025062004</td>
                                        <td>赵六 (4栋1502)</td>
                                        <td>物业管理费</td>
                                        <td>¥1,450.00</td>
                                        <td>2025-06-03</td>
                                        <td><span class="badge badge-danger">已逾期</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-primary" onclick="showRemindModal('FE2025062004')">
                                                <i class="fas fa-bell"></i> 催缴
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                                        <td>FE2025062005</td>
                                        <td>孙七 (5栋302)</td>
                                        <td>维修基金</td>
                                        <td>¥500.00</td>
                                        <td>2025-06-15</td>
                                        <td><span class="badge badge-warning">未缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showEditModal('FE2025062005')">
                                                <i class="fas fa-edit"></i> 编辑
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                                        <td>FE2025062006</td>
                                        <td>周八 (6栋1001)</td>
                                        <td>水电费</td>
                                        <td>¥890.00</td>
                                        <td>2025-06-22</td>
                                        <td><span class="badge badge-warning">未缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline" onclick="showEditModal('FE2025062006')">
                                                <i class="fas fa-edit"></i> 编辑
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- <div id="noResultsMessage" class="empty-state hidden">
                            <i class="fas fa-file-invoice"></i>
                            <h3>未找到匹配的费用记录</h3>
                            <p>请尝试调整筛选条件或重置筛选</p>
                        </div> -->
                        
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                            <div>显示 <span id="displayedCount">6</span> 项，共 <span id="totalFees">6</span> 项</div>
                            <div class="pagination">
                                <button class="btn btn-outline"><i class="fas fa-chevron-left"></i></button>
                                <button class="btn btn-outline active">1</button>
                                <button class="btn btn-outline">2</button>
                                <button class="btn btn-outline">3</button>
                                <button class="btn btn-outline">...</button>
                                <button class="btn btn-outline">25</button>
                                <button class="btn btn-outline"><i class="fas fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 添加费用 -->
                <div id="fee-add" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h2><i class="fas fa-plus-circle"></i> 添加费用</h2>
                        </div>
                        
                        <div class="fee-form">
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            住户信息 <span class="required">*</span>
                                        </div>
                                        <select class="form-control" id="residentSelect">
                                            <option value="">选择住户...</option>
                                            <option value="1">张三 (1栋502)</option>
                                            <option value="2">李四 (2栋1203)</option>
                                            <option value="3">王五 (3栋806)</option>
                                            <option value="4">赵六 (4栋1502)</option>
                                            <option value="5">孙七 (5栋302)</option>
                                            <option value="6">周八 (6栋1001)</option>
                                            <option value="7">吴九 (7栋701)</option>
                                            <option value="8">郑十 (8栋1505)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            费用类型 <span class="required">*</span>
                                        </div>
                                        <select class="form-control" id="feeType" onchange="toggleCustomFeeField()">
                                            <option value="">选择费用类型...</option>
                                            <option value="property">物业管理费</option>
                                            <option value="parking">停车费</option>
                                            <option value="utility">水电费</option>
                                            <option value="gas">燃气费</option>
                                            <option value="repair">维修基金</option>
                                            <option value="other">其他费用</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="customFeeField" class="custom-fee-field">
                                <div class="form-group">
                                    <div class="form-label">
                                        自定义费用名称 <span class="required">*</span>
                                    </div>
                                    <input type="text" class="form-control" id="customFeeName" placeholder="输入费用名称">
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            费用金额 <span class="required">*</span>
                                        </div>
                                        <div style="display: flex; align-items: center;">
                                            <span style="background: #f5f7fa; padding: 12px 15px; border: 1px solid #ddd; border-right: none; border-radius: 6px 0 0 6px;">¥</span>
                                            <input type="number" class="form-control" id="feeAmount" placeholder="输入金额" style="border-radius: 0 6px 6px 0; border-left: none;">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            费用周期
                                        </div>
                                        <select class="form-control" id="feePeriod">
                                            <option value="once">一次性费用</option>
                                            <option value="monthly">月度费用</option>
                                            <option value="quarterly">季度费用</option>
                                            <option value="yearly">年度费用</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class="form-label">
                                    费用说明
                                </div>
                                <textarea class="form-control" id="feeDescription" placeholder="输入费用说明...">物业管理费</textarea>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            生成日期
                                        </div>
                                        <input type="date" class="form-control" id="createDate" value="2025-06-20">
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            缴费截止日期
                                        </div>
                                        <input type="date" class="form-control" id="dueDate" value="2025-07-05">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn btn-outline" onclick="resetForm()">
                                    <i class="fas fa-times"></i> 取消
                                </button>
                                <button class="btn btn-success" onclick="submitFee()">
                                    <i class="fas fa-check"></i> 提交费用
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 统计分析 -->
                <div id="fee-statistics" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h2><i class="fas fa-chart-bar"></i> 费用统计分析</h2>
                            <div>
                                <select class="form-control" id="timeRange" onchange="updateCharts()" style="width: auto;">
                                    <option value="monthly">本月</option>
                                    <option value="quarterly">本季度</option>
                                    <option value="yearly">本年度</option>
                                    <option value="custom">自定义范围</option>
                                </select>
                                <button class="btn btn-outline ml-10" onclick="exportChartData()">
                                    <i class="fas fa-download"></i> 导出数据
                                </button>
                            </div>
                        </div>
                        
                        <div class="stats-container">
                            <div class="stat-card">
                                <div class="stat-icon primary">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥156,230</h3>
                                    <p>总收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon warning">
                                    <i class="fas fa-home"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥98,450</h3>
                                    <p>物业费收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon success">
                                    <i class="fas fa-car"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥32,150</h3>
                                    <p>停车费收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon danger">
                                    <i class="fas fa-tint"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥25,630</h3>
                                    <p>水电费收入</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="chart-switcher">
                            <button class="active" onclick="switchChart('line')">折线图</button>
                            <button onclick="switchChart('bar')">柱状图</button>
                            <button onclick="switchChart('area')">面积图</button>
                        </div>
                        
                        <h3 style="margin: 20px 0 10px;">月度费用分析</h3>
                        <div class="chart-container">
                            <div class="chart-wrapper">
                                <canvas id="monthlyChart"></canvas>
                            </div>
                        </div>
                        
                        <h3 style="margin: 20px 0 10px;">费用类型分布</h3>
                        <div class="chart-container">
                            <div class="chart-wrapper">
                                <canvas id="feeDistributionChart"></canvas>
                            </div>
                        </div>
                        
                        <div class="export-options">
                            <button class="btn btn-outline" onclick="exportAsImage()">
                                <i class="fas fa-image"></i> 导出为图片
                            </button>
                            <button class="btn btn-outline" onclick="exportAsCSV()">
                                <i class="fas fa-file-csv"></i> 导出为CSV
                            </button>
                            <button class="btn btn-outline" onclick="exportAsPDF()">
                                <i class="fas fa-file-pdf"></i> 导出为PDF
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 查看费用详情模态框 -->
    <div class="modal" id="viewModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-eye"></i> 费用详情</h3>
                <button class="close-modal" onclick="closeModal('viewModal')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="detail-item">
                    <div class="detail-label">费用编号:</div>
                    <div class="detail-value" id="view-id">FE2025062001</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">住户信息:</div>
                    <div class="detail-value" id="view-resident">张三 (A栋502)</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">费用类型:</div>
                    <div class="detail-value" id="view-type">物业管理费</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">金额:</div>
                    <div class="detail-value" id="view-amount">¥1,250.00</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">生成日期:</div>
                    <div class="detail-value" id="view-date">2025-06-01</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">缴费状态:</div>
                    <div class="detail-value" id="view-status"><span class="badge badge-success">已缴费</span></div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">缴费截止日期:</div>
                    <div class="detail-value" id="view-due">2025-07-01</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">费用说明:</div>
                    <div class="detail-value" id="view-desc">每月物业管理费，包含公共区域维护、安保等服务</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('viewModal')">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- 编辑费用模态框 -->
    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 编辑费用</h3>
                <button class="close-modal" onclick="closeModal('editModal')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>费用编号</label>
                    <input type="text" class="form-control" id="edit-id" readonly>
                </div>
                <div class="form-group">
                    <label>住户信息</label>
                    <input type="text" class="form-control" id="edit-resident" readonly>
                </div>
                <div class="form-group">
                    <label>费用类型</label>
                    <select class="form-control" id="edit-type">
                        <option value="property">物业管理费</option>
                        <option value="parking">停车费</option>
                        <option value="utility">水电费</option>
                        <option value="gas">燃气费</option>
                        <option value="repair">维修基金</option>
                        <option value="other">其他费用</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>金额</label>
                    <input type="number" class="form-control" id="edit-amount" placeholder="输入金额">
                </div>
                <div class="form-group">
                    <label>生成日期</label>
                    <input type="date" class="form-control" id="edit-date">
                </div>
                <div class="form-group">
                    <label>缴费状态</label>
                    <select class="form-control" id="edit-status">
                        <option value="unpaid">未缴费</option>
                        <option value="paid">已缴费</option>
                        <option value="overdue">已逾期</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>费用说明</label>
                    <textarea class="form-control" id="edit-desc" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('editModal')">取消</button>
                <button class="btn btn-primary" onclick="saveFeeChanges()">保存更改</button>
            </div>
        </div>
    </div>
    
    <!-- 打印预览模态框 -->
    <div class="modal" id="printModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-print"></i> 打印预览</h3>
                <button class="close-modal" onclick="closeModal('printModal')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="print-container">
                    <div class="print-header">
                        <h3>智慧社区管理系统</h3>
                        <p>费用收据</p>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">收据编号:</div>
                        <div class="detail-value" id="print-id">FE2025062001</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">日期:</div>
                        <div class="detail-value" id="print-date">2025-06-01</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">住户信息:</div>
                        <div class="detail-value" id="print-resident">张三 (1栋502)</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">费用类型:</div>
                        <div class="detail-value" id="print-type">物业管理费</div>
                    </div>
                    
                    <div class="print-item">
                        <strong>金额:</strong>
                        <strong id="print-amount">¥1,250.00</strong>
                    </div>
                    <div class="print-item">
                        <span>缴费状态:</span>
                        <span id="print-status"><span class="badge badge-success">已缴费</span></span>
                    </div>
                    
                    <div class="print-footer">
                        <p>智慧社区管理系统自动生成</p>
                        <p>感谢您的使用！</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('printModal')">关闭</button>
                <button class="btn btn-primary" onclick="printReceipt()">
                    <i class="fas fa-print"></i> 打印
                </button>
            </div>
        </div>
    </div>
    
    <!-- 催缴通知模态框 -->
    <div class="modal" id="remindModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-bell"></i> 发送催缴通知</h3>
                <button class="close-modal" onclick="closeModal('remindModal')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>住户信息</label>
                    <input type="text" class="form-control" id="remind-resident" readonly>
                </div>
                <div class="form-group">
                    <label>费用编号</label>
                    <input type="text" class="form-control" id="remind-id" readonly>
                </div>
                <div class="form-group">
                    <label>费用类型</label>
                    <input type="text" class="form-control" id="remind-type" readonly>
                </div>
                <div class="form-group">
                    <label>欠费金额</label>
                    <input type="text" class="form-control" id="remind-amount" readonly>
                </div>
                <div class="form-group">
                    <label>催缴通知内容</label>
                    <div class="reminder-content">
                        <p>尊敬的住户：</p>
                        <p>我们注意到您的<span id="remind-type-text">物业管理费</span>（费用编号：<span id="remind-id-text">FE2025062001</span>）尚未缴纳。</p>
                        <p>欠款金额：<span id="remind-amount-text">¥1,250.00</span></p>
                        <p>请尽快完成缴费，以免产生逾期费用。如有疑问，请联系物业管理处。</p>
                        <p>感谢您的配合！</p>
                        <p>智慧社区管理处</p>
                        <p><span id="current-date">2025年6月22日</span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label>发送方式</label>
                    <div class="reminder-actions">
                        <button class="btn btn-outline">
                            <i class="fas fa-envelope"></i> 发送邮件
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-sms"></i> 发送短信
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-mobile-alt"></i> APP通知
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('remindModal')">取消</button>
                <button class="btn btn-primary" onclick="sendReminder()">发送通知</button>
            </div>
        </div>
    </div>
    
    <script>
        // 本地存储工具函数
        const StorageService = {
            get: function(key) {
                try {
                    return JSON.parse(localStorage.getItem(key)) || {};
                } catch (e) {
                    console.error('Failed to parse storage data:', e);
                    return {};
                }
            },
            set: function(key, value) {
                try {
                    localStorage.setItem(key, JSON.stringify(value));
                    return true;
                } catch (e) {
                    console.error('Failed to save data to storage:', e);
                    return false;
                }
            }
        };

        // 费用数据 - 优先从localStorage加载
        let feeData = StorageService.get('feeData') || {
            'FE2025062001': {
                resident: '张三 (1栋502)',
                type: '物业管理费',
                amount: 1250.00, // 使用数字存储金额，便于计算
                date: '2025-06-01',
                status: '已缴费',
                dueDate: '2025-07-01',
                description: '每月物业管理费，包含公共区域维护、安保等服务'
            },
            'FE2025062002': {
                resident: '李四 (2栋1203)',
                type: '物业管理费',
                amount: 350.00, // 使用数字存储金额，便于计算
                date: '2025-06-05',
                status: '未缴费',
                dueDate: '2025-07-05',
                description: '地下停车位月租费'
            },
            'FE2025062003': {
                resident: '王五 (3栋806)',
                type: '水电费',
                amount: 285.50, // 使用数字存储金额，便于计算
                date: '2025-06-10',
                status: '已缴费',
                dueDate: '2025-07-10',
                description: '5月水电费，按实际用量计算'
            },
            'FE2025062004': {
                resident: '赵六 (4栋1502)',
                type: '物业管理费',
                amount: 1450.00, // 使用数字存储金额，便于计算
                date: '2025-06-03',
                status: '已逾期',
                dueDate: '2025-07-03',
                description: '每月物业管理费，包含公共区域维护、安保等服务'
            },
            'FE2025062005': {
                resident: '孙七 (5栋302)',
                type: '维修基金',
                amount: 500.00, // 使用数字存储金额，便于计算
                date: '2025-06-15',
                status: '未缴费',
                dueDate: '2025-07-15',
                description: '电梯维护专项基金'
            },
            'FE2025062006': {
                resident: '周八 (6栋1001)',
                type: '水电费',
                amount: 890.00, // 使用数字存储金额，便于计算
                date: '2025-06-22',
                status: '未缴费',
                dueDate: '2025-07-22',
                description: '6月水电费，按实际用量计算'
            }
        };
        // 初始化时保存到localStorage
        if (Object.keys(StorageService.get('feeData')).length === 0) {
            StorageService.set('feeData', feeData);
        }
        
        // 费用类型映射
        const typeMapping = {
            'property': '物业管理费',
            'parking': '停车费',
            'utility': '水电费',
            'gas': '燃气费',
            'repair': '维修基金',
            'other': '其他费用'
        };
        
        // 状态映射
        const statusMapping = {
            'unpaid': '未缴费',
            'paid': '已缴费',
            'overdue': '已逾期'
        };
        
        // 住户数据
        const residents = {
            '1': '张三 (1栋502)',
            '2': '李四 (2栋1203)',
            '3': '王五 (3栋806)',
            '4': '赵六 (4栋1502)',
            '5': '孙七 (5栋302)',
            '6': '周八 (6栋1001)',
            '7': '吴九 (7栋701)',
            '8': '郑十 (8栋1505)'
        };
        
        // 费用计数器
        let feeCounter = 2006; // 初始费用编号后缀
        
        // 初始化图表
        let monthlyChart = null;
        let feeDistributionChart = null;
        let currentChartType = 'line';
        
        // 图表数据
        const monthlyData = {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '总收入 (¥)',
                data: [124500, 136800, 142300, 150200, 148600, 156230],
                borderColor: '#3498db',
                backgroundColor: 'rgba(52, 152, 219, 0.1)',
                borderWidth: 3,
                tension: 0.3,
                fill: true
            }]
        };
        
        const feeDistributionData = {
            labels: ['物业管理费', '停车费', '水电费', '燃气费', '维修基金', '其他费用'],
            datasets: [{
                data: [98450, 32150, 25630, 18500, 15300, 15200],
                backgroundColor: [
                    '#f39c12',
                    '#2ecc71',
                    '#e74c3c',
                    '#9b59b6',
                    '#1abc9c',
                    '#95a5a6'
                ]
            }]
        };

        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('actionNotification');
            const textElement = document.getElementById('notificationText');
            
            textElement.textContent = message;
            notification.className = 'notification ' + type;
            notification.classList.remove('hidden');
            
            // 3秒后自动关闭
            setTimeout(() => {
                notification.classList.add('hidden');
            }, 3000);
        }
        
        // 关闭通知
        function closeNotification() {
            document.getElementById('actionNotification').classList.add('hidden');
        }
        
        // 应用筛选
        function applyFilters() {
            const filterType = document.getElementById('filterType').value;
            const filterStatus = document.getElementById('filterStatus').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            
            const feeTypeText = document.getElementById('filterType').options[document.getElementById('filterType').selectedIndex].text;
            const statusText = document.getElementById('filterStatus').options[document.getElementById('filterStatus').selectedIndex].text;
            
            // 获取所有行
            const rows = document.querySelectorAll('#feeTableBody tr');
            let visibleCount = 0;
            
            // 遍历所有行
            rows.forEach(row => {
                const typeCell = row.cells[3].textContent;
                const statusBadge = row.cells[6].querySelector('.badge');
                const statusText = statusBadge ? statusBadge.textContent : '';
                const dateCell = row.cells[5].textContent;
                
                // 检查费用类型
                let typeMatch = true;
                if (filterType !== 'all') {
                    const expectedType = typeMapping[filterType];
                    typeMatch = typeCell === expectedType;
                }
                
                // 检查状态
                let statusMatch = true;
                if (filterStatus !== 'all') {
                    const expectedStatus = statusMapping[filterStatus];
                    statusMatch = statusText === expectedStatus;
                }
                
                // 检查日期范围
                let dateMatch = true;
                if (startDate && endDate) {
                    dateMatch = dateCell >= startDate && dateCell <= endDate;
                }
                
                // 显示或隐藏行
                if (typeMatch && statusMatch && dateMatch) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });
            
            // 更新显示计数
            document.getElementById('displayedCount').textContent = visibleCount;
            
            // 显示空状态提示
            const noResultsMessage = document.getElementById('noResultsMessage');
            if (visibleCount === 0) {
                noResultsMessage.classList.remove('hidden');
            } else {
                noResultsMessage.classList.add('hidden');
            }
            
            // 显示通知
            showNotification(`已应用筛选: 费用类型 - ${feeTypeText}, 状态 - ${statusText}, 日期范围: ${startDate} 至 ${endDate}`, 'success');
        }
        
        // 重置筛选
        function resetFilters() {
            // 重置筛选器值
            document.getElementById('filterType').value = 'all';
            document.getElementById('filterStatus').value = 'all';
            
            // 重置日期范围（设置为默认值）
            document.getElementById('startDate').value = '2025-05-01';
            document.getElementById('endDate').value = '2025-06-20';
            
            // 显示所有行
            const rows = document.querySelectorAll('#feeTableBody tr');
            rows.forEach(row => {
                row.style.display = '';
            });
            
            // 更新显示计数
            document.getElementById('displayedCount').textContent = rows.length;
            
            // 隐藏空状态提示
            document.getElementById('noResultsMessage').classList.add('hidden');
            
            showNotification('筛选条件已重置', 'success');
        }
        
        // 切换高级筛选面板
        function toggleAdvancedFilter() {
            const filterPanel = document.getElementById('advancedFilter');
            filterPanel.classList.toggle('active');
        }
        
        // 应用高级筛选
        function applyAdvancedFilters() {
            const building = document.getElementById('filterBuilding').value;
            const unit = document.getElementById('filterUnit').value;
            const minAmount = document.getElementById('minAmount').value;
            const maxAmount = document.getElementById('maxAmount').value;
            
            let message = '已应用高级筛选: ';
            if (building) message += `楼栋 - ${building}, `;
            if (unit) message += `单元 - ${unit}, `;
            if (minAmount || maxAmount) {
                message += `金额范围 - ${minAmount || '无下限'} 至 ${maxAmount || '无上限'}`;
            }
            
            showNotification(message, 'success');
            toggleAdvancedFilter();
        }
        
        // 重置高级筛选
        function resetAdvancedFilters() {
            document.getElementById('filterBuilding').value = '';
            document.getElementById('filterUnit').value = '';
            document.getElementById('minAmount').value = '';
            document.getElementById('maxAmount').value = '';
        }
        
        // 重置表单
        function resetForm() {
            document.getElementById('residentSelect').value = '';
            document.getElementById('feeType').value = '';
            document.getElementById('feeAmount').value = '';
            document.getElementById('feePeriod').value = 'once';
            document.getElementById('feeDescription').value = '物业管理费';
            document.getElementById('customFeeField').style.display = 'none';
            document.getElementById('customFeeName').value = '';
            
            // 设置日期为今天和7天后
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('createDate').value = formattedDate;
            
            const dueDate = new Date();
            dueDate.setDate(today.getDate() + 7);
            document.getElementById('dueDate').value = dueDate.toISOString().split('T')[0];
            
            showNotification('表单已重置', 'warning');
        }
        
        // 切换自定义费用字段显示
        function toggleCustomFeeField() {
            const feeType = document.getElementById('feeType').value;
            const customField = document.getElementById('customFeeField');
            
            if (feeType === 'other') {
                customField.style.display = 'block';
            } else {
                customField.style.display = 'none';
            }
        }
        
        // 提交费用
        function submitFee() {
            const residentId = document.getElementById('residentSelect').value;
            const feeType = document.getElementById('feeType').value;
            const amount = document.getElementById('feeAmount').value;
            
            // 验证必填字段
            if (!residentId) {
                showNotification('请选择住户信息', 'danger');
                return;
            }
            
            if (!feeType) {
                showNotification('请选择费用类型', 'danger');
                return;
            }
            
            if (feeType === 'other' && !document.getElementById('customFeeName').value) {
                showNotification('请输入自定义费用名称', 'danger');
                return;
            }
            
            if (!amount || amount <= 0) {
                showNotification('请输入有效的费用金额', 'danger');
                return;
            }
            
            // 显示加载效果
            const submitBtn = document.querySelector('#fee-add .btn-success');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<span class="loading"></span> 处理中...';
            submitBtn.disabled = true;
            
            // 模拟API请求
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                
                // 获取选中的住户信息
                const residentText = document.getElementById('residentSelect').options[document.getElementById('residentSelect').selectedIndex].text;
                
                // 获取费用类型文本
                const feeTypeText = feeType === 'other' 
                    ? document.getElementById('customFeeName').value 
                    : document.getElementById('feeType').options[document.getElementById('feeType').selectedIndex].text;
                
                // 生成唯一的费用编号
                feeCounter++;
                const feeId = `FE202506${feeCounter}`;
                
                // 创建新的费用对象
                const newFee = {
                    resident: residentText,
                    type: feeTypeText,
                    amount: parseFloat(amount), // 存储原始数字便于计算
                    date: document.getElementById('createDate').value,
                    status: '未缴费',
                    dueDate: document.getElementById('dueDate').value,
                    description: document.getElementById('feeDescription').value
                };
                
                // 添加到费用数据
                feeData[feeId] = newFee;
                
                // 保存更新后的费用数据到localStorage
                StorageService.set('feeData', feeData);
                
                // 添加到表格
                addFeeToTable(feeId, newFee);
                
                // 更新总费用计数
                updateTotalFeeCount();
                
                // 数据验证
            if (isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
                showNotification('金额必须是有效的正数', 'error');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                return;
            }

            // 显示成功消息
                showNotification(`费用已成功提交！住户: ${residentText}, 类型: ${feeTypeText}, 金额: ${formatCurrency(amount)}`, 'success');
                
                // 重置表单
                resetForm();
                
                // 切换到费用列表
                switchToFeeList();
            }, 1500);
        }
        
        // 添加费用到表格
        function addFeeToTable(feeId, fee) {
            const tableBody = document.getElementById('feeTableBody');
            const newRow = document.createElement('tr');
            newRow.className = 'new-fee-row';
            
            // 设置行内容
            newRow.innerHTML = `
                <td><input type="checkbox" class="row-checkbox" onchange="updateSelection()"></td>
                <td>${feeId}</td>
                <td>${fee.resident}</td>
                <td>${fee.type}</td>
                <td>${formatCurrency(fee.amount)}</td>
                <td>${fee.date}</td>
                <td><span class="badge badge-warning">${fee.status}</span></td>
                <td>
                    <button class="btn btn-sm btn-outline" onclick="showEditModal('${feeId}')">
                        <i class="fas fa-edit"></i> 编辑
                    </button>
                </td>
            `;
            
            // 插入到表格顶部
            tableBody.insertBefore(newRow, tableBody.firstChild);
            
            // 更新显示计数
            document.getElementById('displayedCount').textContent = parseInt(document.getElementById('displayedCount').textContent) + 1;
            document.getElementById('totalFees').textContent = parseInt(document.getElementById('totalFees').textContent) + 1;
        }
        
        // 更新总费用计数
        function updateTotalFeeCount() {
            const totalCount = Object.keys(feeData).length;
            document.getElementById('totalFees').textContent = totalCount;
        }
        
        // 切换到费用列表
        function switchToFeeList() {
            // 移除所有活动菜单
            document.querySelectorAll('.sidebar-menu a').forEach(item => {
                item.classList.remove('active');
            });
            
            // 设置费用列表菜单为活动状态
            document.querySelector('[data-tab="fee-list"]').classList.add('active');
            
            // 隐藏所有选项卡内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示费用列表
            document.getElementById('fee-list').classList.add('active');
        }
        
        // 导出数据
        function exportData(type) {
            if (type === 'all') {
                showNotification('正在导出全部数据...', 'success');
            } else {
                const selected = document.querySelectorAll('.row-checkbox:checked').length;
                if (selected === 0) {
                    showNotification('请至少选择一项进行导出', 'warning');
                    return;
                }
                showNotification(`正在导出选中的 ${selected} 条数据...`, 'success');
            }
            
            setTimeout(() => {
                showNotification('数据导出成功！', 'success');
            }, 1500);
        }
        
        // 全选/取消全选
        function toggleAllRows(checkbox) {
            const checkboxes = document.querySelectorAll('.row-checkbox');
            checkboxes.forEach(cb => {
                cb.checked = checkbox.checked;
            });
            updateSelection();
        }
        
        // 更新选择计数
        function updateSelection() {
            const selected = document.querySelectorAll('.row-checkbox:checked').length;
            document.getElementById('selectedCount').textContent = selected;
            
            const batchActions = document.getElementById('batchActions');
            if (selected > 0) {
                batchActions.classList.remove('hidden');
            } else {
                batchActions.classList.add('hidden');
            }
        }
        
        // 批量催缴
        function batchRemind() {
            const selected = document.querySelectorAll('.row-checkbox:checked').length;
            showNotification(`已向${selected}位住户发送缴费提醒`, 'success');
            cancelBatch();
        }
        
        // 批量标记为已缴费
        function batchMarkAsPaid() {
            const selected = document.querySelectorAll('.row-checkbox:checked').length;
            showNotification(`已标记${selected}条记录为已缴费`, 'success');
            cancelBatch();
        }
        
        // 取消批量操作
        function cancelBatch() {
            document.getElementById('selectAllRows').checked = false;
            const checkboxes = document.querySelectorAll('.row-checkbox');
            checkboxes.forEach(cb => {
                cb.checked = false;
            });
            document.getElementById('batchActions').classList.add('hidden');
        }
        
        // 导出图表数据
        function exportChartData() {
            showNotification('图表数据导出成功！', 'success');
        }
        
        // 打开模态框
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'flex';
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }
        
        // 显示查看费用详情模态框
        function showViewModal(feeId) {
            const fee = feeData[feeId];
            if (fee) {
                document.getElementById('view-id').textContent = feeId;
                document.getElementById('view-resident').textContent = fee.resident;
                document.getElementById('view-type').textContent = fee.type;
                document.getElementById('view-amount').textContent = fee.amount;
                document.getElementById('view-date').textContent = fee.date;
                document.getElementById('view-status').innerHTML = `<span class="badge ${fee.status === '已缴费' ? 'badge-success' : fee.status === '未缴费' ? 'badge-warning' : 'badge-danger'}">${fee.status}</span>`;
                document.getElementById('view-due').textContent = fee.dueDate;
                document.getElementById('view-desc').textContent = fee.description;
                
                openModal('viewModal');
            }
        }
        
        // 显示编辑费用模态框
        function showEditModal(feeId) {
            const fee = feeData[feeId];
            if (fee) {
                document.getElementById('edit-id').value = feeId;
                document.getElementById('edit-resident').value = fee.resident;
                
                // 设置正确的费用类型
                const feeTypeSelect = document.getElementById('edit-type');
                for (let i = 0; i < feeTypeSelect.options.length; i++) {
                    if (feeTypeSelect.options[i].text === fee.type) {
                        feeTypeSelect.selectedIndex = i;
                        break;
                    }
                }
                
                document.getElementById('edit-amount').value = fee.amount.replace('¥', '').replace(',', '');
                document.getElementById('edit-date').value = fee.date;
                document.getElementById('edit-status').value = fee.status === '已缴费' ? 'paid' : fee.status === '未缴费' ? 'unpaid' : 'overdue';
                document.getElementById('edit-desc').value = fee.description;
                
                openModal('editModal');
            }
        }
        
        // 保存费用更改
        function saveFeeChanges() {
            const feeId = document.getElementById('edit-id').value;
            const feeTypeSelect = document.getElementById('edit-type');
            const feeTypeText = feeTypeSelect.options[feeTypeSelect.selectedIndex].text;
            const amount = document.getElementById('edit-amount').value;
            const status = document.getElementById('edit-status').value;
            
            if (!amount || amount <= 0) {
                showNotification('请输入有效的费用金额', 'danger');
                return;
            }
            
            // 更新费用数据
            feeData[feeId].type = feeTypeText;
            feeData[feeId].amount = '¥' + parseFloat(amount).toFixed(2);
            
            // 更新表格中的显示
            const rows = document.querySelectorAll('tbody tr');
            rows.forEach(row => {
                if (row.cells[1].textContent === feeId) {
                    // 更新费用类型
                    row.cells[3].textContent = feeTypeText;
                    
                    // 更新金额
                    row.cells[4].textContent = '¥' + parseFloat(amount).toFixed(2);
                    
                    // 更新状态
                    const statusText = status === 'paid' ? '已缴费' : status === 'unpaid' ? '未缴费' : '已逾期';
                    const badgeClass = status === 'paid' ? 'badge-success' : status === 'unpaid' ? 'badge-warning' : 'badge-danger';
                    row.cells[6].innerHTML = `<span class="badge ${badgeClass}">${statusText}</span>`;
                }
            });
            
            showNotification(`费用 ${feeId} 已更新！`, 'success');
            closeModal('editModal');
        }
        
        // 显示打印预览模态框
        function showPrintModal(feeId) {
            const fee = feeData[feeId];
            if (fee) {
                document.getElementById('print-id').textContent = feeId;
                document.getElementById('print-date').textContent = fee.date;
                document.getElementById('print-resident').textContent = fee.resident;
                document.getElementById('print-type').textContent = fee.type;
                document.getElementById('print-amount').textContent = fee.amount;
                document.getElementById('print-status').innerHTML = `<span class="badge ${fee.status === '已缴费' ? 'badge-success' : fee.status === '未缴费' ? 'badge-warning' : 'badge-danger'}">${fee.status}</span>`;
                
                openModal('printModal');
            }
        }
        
        // 打印收据
        function printReceipt() {
            const printContent = document.querySelector('.print-container').innerHTML;
            const originalContent = document.body.innerHTML;
            
            document.body.innerHTML = printContent;
            window.print();
            document.body.innerHTML = originalContent;
            
            showNotification('收据已发送到打印机！', 'success');
            closeModal('printModal');
        }
        
        // 显示催缴模态框
        function showRemindModal(feeId) {
            const fee = feeData[feeId];
            if (fee) {
                document.getElementById('remind-id').value = feeId;
                document.getElementById('remind-resident').value = fee.resident;
                document.getElementById('remind-type').value = fee.type;
                document.getElementById('remind-amount').value = fee.amount;
                
                document.getElementById('remind-type-text').textContent = fee.type;
                document.getElementById('remind-id-text').textContent = feeId;
                document.getElementById('remind-amount-text').textContent = fee.amount;
                
                // 设置当前日期
                const today = new Date();
                const formattedDate = `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`;
                document.getElementById('current-date').textContent = formattedDate;
                
                openModal('remindModal');
            }
        }
        
        // 发送催缴通知
        function sendReminder() {
            const feeId = document.getElementById('remind-id').value;
            const resident = document.getElementById('remind-resident').value;
            
            showNotification(`催缴通知已发送给 ${resident}！`, 'success');
            closeModal('remindModal');
        }
        
        // 初始化图表
        function initCharts() {
            // 月度费用趋势图
            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
            monthlyChart = new Chart(monthlyCtx, {
                type: currentChartType,
                data: monthlyData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `¥${context.parsed.y.toLocaleString()}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '¥' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
            
            // 费用类型分布图
            const distributionCtx = document.getElementById('feeDistributionChart').getContext('2d');
            feeDistributionChart = new Chart(distributionCtx, {
                type: 'pie',
                data: feeDistributionData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 20
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ¥${value.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 切换图表类型
        function switchChart(type) {
            currentChartType = type;
            monthlyChart.destroy();
            
            // 更新按钮状态
            document.querySelectorAll('.chart-switcher button').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 重新创建图表
            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
            monthlyChart = new Chart(monthlyCtx, {
                type: type,
                data: monthlyData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `¥${context.parsed.y.toLocaleString()}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '¥' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 更新图表数据
        function updateCharts() {
            const timeRange = document.getElementById('timeRange').value;
            
            // 根据选择的时间范围更新数据
            if (timeRange === 'monthly') {
                monthlyData.labels = ['1月', '2月', '3月', '4月', '5月', '6月'];
                monthlyData.datasets[0].data = [124500, 136800, 142300, 150200, 148600, 156230];
            } else if (timeRange === 'quarterly') {
                monthlyData.labels = ['第一季度', '第二季度', '第三季度', '第四季度'];
                monthlyData.datasets[0].data = [403600, 455100, 482300, 498700];
            } else if (timeRange === 'yearly') {
                monthlyData.labels = ['2022年', '2023年', '2024年', '2025年'];
                monthlyData.datasets[0].data = [1523600, 1685400, 1839200, 2057000];
            }
            
            // 更新图表
            monthlyChart.update();
            feeDistributionChart.update();
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期为今天
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('createDate').value = formattedDate;
            
            // 设置截止日期为7天后
            const dueDate = new Date();
            dueDate.setDate(today.getDate() + 7);
            document.getElementById('dueDate').value = dueDate.toISOString().split('T')[0];
            
            // 添加菜单点击事件
            document.querySelectorAll('.sidebar-menu a').forEach(menuItem => {
                menuItem.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活动菜单
                    document.querySelectorAll('.sidebar-menu a').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 设置当前菜单为活动状态
                    this.classList.add('active');
                    
                    // 获取目标选项卡ID
                    const tabId = this.getAttribute('data-tab');
                    
                    // 隐藏所有选项卡内容
                    document.querySelectorAll('.tab-content').forEach(tab => {
                        tab.classList.remove('active');
                    });
                    
                    // 显示目标选项卡
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 初始化图表
            initCharts();
            
            // 初始化总费用计数
            updateTotalFeeCount();
        });
    </script>
</body>
</html>